<template>
	<div class="model-right">
		<div class="table-header">
			<msui-form :options="form" ref="form">
				<template #save>
					<div class="special-save">
						<el-button icon="el-icon-refresh-left" type="primary" class="buttonChangeColor" size="small"
							@click="search">重置</el-button>
						<el-button icon="el-icon-search" type="info" class="buttonChangeColor" size="small"
							@click="search">搜索</el-button>
					</div>
				</template>
			</msui-form>
		</div>
		<model-list-core :model="model" :url="url" :params="mergeParams" @changeData="changeData">
		</model-list-core>
		<msui-drawer ref="msuiDrawer">
			<msui-form :options="addFormOptions"></msui-form>
		</msui-drawer>
	</div>
</template>

<script>
export default {
	props: {
		params: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	computed: {
		mergeParams() {
			return {
				...this.params,
				...this.paramsKeyword,
			};
		},
	},
	data() {
		return {
			model: {},
			keyword: "",
			paramsKeyword: {},
			url: {
				get: "/api-tenant/v1/tenantselect",
				post: "/api-tenant/v1/tenantupdata",
			},
			form: this.initForm({
				name: "农资编号",
				date: "农资名称"
			}),
			addFormOptions: this.initAddFormOptions({
				a: "农资分类",
				b: "农资编号",
				c: "农资名称",
				d: "农资品牌",
				e: "农资单位",
				f: "供应商",
				g: "单价",
				h: "农资状态",
				j: '描述',
				i: "头像"
			}),
		};
	},
	created() {
		this.initModel({
			tenantGroupCode: "农资分类",
			tenantGroupPcode: "农资名称",
			tenantGroupCtime: "农资品牌",
			tenantGroupUserName: "单价",
			d: '单位',
			state: "供应商",
			a: '状态',
			b: '描述',
			c: '图片'
		});
	},
	methods: {
		search() { },
		changeData({ data }, datagridOptions, pageOptions) {
			datagridOptions.data = data.records;
			pageOptions.total = data.total;
		},
		initAddFormOptions(formModel) {
			formModel = new this.MsuiFormModel(formModel);
			const { a, b, c, d, e, f, g, h, i } = formModel;
			c.addRules({
				required: true,
				pattern: /^1[3456789]\d{9}$/,
				message: "手机号格式不正确",
				trigger: "blur",
			});
			d.addRules({
				required: true,
				pattern:
					/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,
				message: "请输入正确的身份证号",
				tigger: "blur",
			});
			e.addRules({
				required: true,
				pattern:
					/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
				message: "请输入正确的邮箱",
				tigger: "blur",
			});
			f.addRules({
				required: true,
				message: "请选择归属组织",
				tigger: "change",
			}).type(
				{
					options: [
						{
							label: "组织一",
							value: "组织一",
						},
					],
				},
				"MsuiSelectBox"
			);
			g.addRules({
				required: true,
				message: "请选择归属岗位",
				tigger: "change",
			}).type(
				{
					options: [
						{
							label: "组织一",
							value: "组织一",
						},
					],
				},
				"MsuiSelectBox"
			);
			h.addRules({
				required: true,
				message: "请选择用户角色",
				tigger: "change",
			}).type(
				{
					options: [
						{
							label: "组织一",
							value: "组织一",
						},
					],
				},
				"MsuiSelectBox"
			);
			i.addRules({
				required: true,
				message: "请上传头像",
				tigger: "change",
			}).type({}, "MsuiUpload");
			return {
				labelWidth: "75px",
				labelPosition: "top",
				size: "small",
				disabled: false,
				formModel: formModel,
				style: { marginRight: "50px" },
				inline: false,
				span: 12,
				save: (data) => {
					console.log(data);
					this.paramsKeyword = data;
				},
			};
		},
		initForm(formModel) {
			formModel = new this.MsuiFormModel(formModel);
			return {
				labelWidth: "75px",
				labelPosition: "right",
				size: "small",
				disabled: false,
				formModel: formModel,
				inline: true,
				save: (data) => {
					console.log(data);
					this.paramsKeyword = data;
				},
			};
		},
		initModel(dataModel) {
			const model = new this.MsuiDataGridModel({
				dataModel,
				align: "center",
			});
			this.model = {
				datagridModel: model,
				selection: true,
				data: [
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					},
					{
						tenantGroupCode: "有机肥",
						tenantGroupPcode: "畜禽粪便",
						tenantGroupCtime: "惠多利",
						tenantGroupUserName: "20",
						d: "袋",
						state: 'xxx企业',
						a: '启用',
						b: '-',
						c: '图片'
					}
				],
				globalButton: [
					{
						title: "新建",
						type: "primary",
						size: "small",
						icon: "el-icon-circle-plus-outline",
						clickHandler: () => {
							this.$refs.msuiDrawer.drawer = true;
							this.$refs.msuiDrawer.title = "新建";
						},
					}
				],
				inlineButton: [
					{
						title: "编辑",
						clickHandler: () => { },
					},
					{
						title: "删除",
						style: {
							color: "red",
						},
						clickHandler: ({ row, $index }, rows) => {
							this.MsuiMessage({
								text: "确定要删除此条数据吗？",
								errorMessage: "取消删除",
								successCallBack: () => {
									this.deleteData(row)
										.then(({ data }) => {
											this.$message({
												message: data.desc,
												type: data.success ? "success" : "error",
											});
											if (data.success) {
												rows.splice($index, 1);
												this.$bus.$emit("removeTreeChild", row);
											}
										})
										.catch((err) => {
											this.$message({
												message: "删除失败",
												type: "error",
											});
										});
								},
							});
						},
					},
				],
				datagridFunction: {},
			};
		},
	},
};
</script>
<style scoped>
.model-right {
	flex: 1;
	height: 100%;
	margin-left: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
}

.model-right .table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 54px;
	position: relative;
	background: white;
	border: 0.5px solid #dfe6ec;
	padding-top: 18px;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-left: 15px;
	border-radius: 4px;
}

.model-right .table-header .special-save {
	position: absolute;
	right: 0px;
	margin-right: 18px;
	top: 18px;
}
</style>
